<template>
  <div class="app-container">
    <el-breadcrumb :class="isQSty()" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="handleBreadCrumb()">法定呈缴</el-breadcrumb-item>
      <el-breadcrumb-item :to="handleBreadCrumb()">图书呈缴</el-breadcrumb-item>
      <el-breadcrumb-item>新增缴送</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button
      v-if="isHasPermission('ui-norm.addexternal.add')"
      type="primary"
      size="small"
      class="addBtn"
      @click="handleAddClick()"
    >
      新增
    </el-button>
    <el-table
      :data="addListData"
      style="width: 100%"
    >
      <el-table-column
        prop="userName"
        label="姓名"
      />
      <el-table-column
        prop="account"
        label="账号"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            v-if="isHasPermission('ui-norm.addexternal.edit')"
            type="text"
            size="small"
            style="margin-right: 10px;"
            @click="handleEditClick(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定删除吗？"
            @onConfirm="handleDeleteClick(scope.row)"
          >
            <el-button
              v-if="isHasPermission('ui-norm.addexternal.remove')"
              slot="reference"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <add :add-visible="addVisible" @handleAddClose="handleAddClose" @handleAddSubmit="handleAddSubmit" />
    <edit
      :edit-visible="editVisible"
      :list-item-info="listItemInfo"
      @handleEditClose="handleEditClose"
      @handleEditSubmit="handleEditSubmit"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { ifPermission } from '@/utils'
import Add from './components/Add.vue'
import Edit from './components/Edit.vue'

export default {
  components: {
    Add,
    Edit
  },
  data() {
    return {
      curInfo: {},
      addVisible: false,
      editVisible: false,
      listItemInfo: {}
    }
  },
  computed: {
    ...mapGetters([
      'addListData'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    handleAddClick() {
      this.$data.addVisible = true
    },
    handleAddClose(value) {
      this.addVisible = value
    },
    handleAddSubmit(value) {
      this.$store.dispatch('demo/addExternalAdd', value).then((res) => {
        const code = res.data.code
        if (code === 'COMMON_200') {
          this.$message({
            type: 'success',
            message: '新增成功',
            center: true
          })
          this.$data.addVisible = false
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
    },
    handleDeleteClick(row) {
      this.$store.dispatch('demo/addExternalRemove', { id: row.id }).then((res) => {
        const code = res.data.code
        if (code === 'COMMON_200') {
          this.$message({
            type: 'success',
            message: '删除成功',
            center: true
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
      this.getList()
    },
    handleEditClick(row) {
      this.$store.dispatch('demo/addExternalListItem', { id: row.id }).then((res) => {
        this.editVisible = true
        this.listItemInfo = res.data.data
      })
    },
    handleEditClose(value) {
      this.editVisible = value
    },
    handleEditSubmit(value) {
      this.$store.dispatch('demo/addExternalEdit', value).then((res) => {
        const code = res.data.code
        if (code === 'COMMON_200') {
          this.$message({
            type: 'success',
            message: '编辑成功',
            center: true
          })
          this.editVisible = false
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
      this.getList()
    },
    handleBreadCrumb() {
      // qiankun主应用环境面包屑跳转加前缀
      if (window.__POWERED_BY_QIANKUN__) {
        return '/subvue/external/bookexternal/addexternal'
      } else {
        return '/external/bookexternal/addexternal'
      }
    },
    getList() {
      this.$store.dispatch('demo/addExternalList')
    },
    isQSty() {
      if (window.__POWERED_BY_QIANKUN__) {
        return 'breadTitleQiank'
      } else {
        return 'breadTitle'
      }
    },
    isHasPermission(permissionName) {
      return ifPermission(permissionName)
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.titleHeard {
  height: 40px;
  border: 1px solid #ccc;
  padding: 10px 5px;
  margin-bottom: 10px;
  background-color: #fff;
}
.breadTitle {
  margin: 0px 0px 20px 0px;
  background-color: #f0f2f578;
  padding: 15px 0px 15px 15px;
}
.breadTitleQiank {
  margin: 0px 0px 20px 0px;
  background-color: #fff;
  padding: 15px 0px 15px 15px;
}
.addBtn {
  float:right;
  margin-bottom:20px;
}
</style>
